<template>
	<view>
		<el-popup ref="popup" direction="bottom" @close="onClose">
			<view class="coupon-title">优惠券</view>
			<view style="width: 100%; height: 70rpx;"></view>
			<scroll-view :style="{ 'height' : (windowHeight / 2) + 'px' }" scroll-y>
				<view class="wrapper">
					<view class="coupon-list">
						<view class="coupon-item" v-for="(item,index) in list" :key="index">
							<view class="coupon-box" :class="{'grey' : inArray(item.status,[2,3])}">
								<view class="top-type" :class="{'grey' : inArray(item.status,[2,3])}">{{ item.type == 1 ? "满减券" : "折扣券" }}</view>
								<view class="l">
									<view class="price">
										<text class="prefix" v-if="item.type == 1">￥</text>
										<text class="money">{{ item.amount }}{{ item.type == 2 ? "折" : "" }}</text>
									</view>
									<view class="discount">满{{ item.order_amount }}元可用</view>
								</view>
								<view class="line"></view>
								<view class="content">
									<view class="title">{{ item.name }}</view>
									<view class="bottom">
										<view class="time" v-if="item.expire_type == 1">领取后{{ item.time }}天内有效</view>
										<view class="time" v-if="item.expire_type == 2">{{ item.time }}当天有效</view>
										<view class="receive" v-if="item.status == 1" @click="onReceive(item,index)">立即领券</view>
										<view class="receive" v-if="item.status == 2">已领取</view>
										<view class="receive" v-if="item.status == 3">已过期</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</el-popup>
	</view>
</template>

<script setup>
	import { nextTick, onMounted, ref, watch } from "vue";
	import { inArray } from "@/el-ui/libs/check.js";
	
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: []
		}
	});
	
	const emits = defineEmits(["modelValue","update:modelValue","click"]);
	
	const { windowHeight } = uni.getSystemInfoSync();
	
	const popup = ref();
	onMounted(()=>{
		nextTick(()=>{
			props.modelValue && popup.value?.open();
		})
	})
	
	const onReceive = (item,index)=>{
		emits("click",{ index: index, data: item });
	}
	
	const onClose = ()=>{
		emits("update:modelValue",false);
	}
	
	watch(()=>props.modelValue,(value)=>{
		if(value){
			nextTick(()=>{
				popup.value?.open();
			})
		}else{
			nextTick(()=>{
				popup.value?.close();
			})
		}
	});
	
</script>

<style lang="scss" scoped>
	.coupon-title {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 36rpx;
		position: absolute;
		left: 0;
		top: 32rpx;
	}
	.wrapper {
		padding-top: 20rpx;
		.coupon-list {
			.coupon-item {
				position: relative;
				overflow: hidden;
				margin-bottom: 11px;
				.coupon-box {
					background: linear-gradient(-128deg, #ff6d6d, #ff3636);
					&.grey {
						background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
					}
					width: 100%;
					display: flex;
					border-radius: 4px;
					color: #fff;
					height: 90px;
					.top-type {
						position: absolute;
						top: 0;
						right: 0;
						z-index: 10;
						width: 64px;
						padding: 3px 0;
						background: #a771ff;
						font-size: 10px;
						text-align: center;
						color: #fff;
						-webkit-transform: rotate(45deg);
						transform: rotate(45deg);
						-webkit-transform-origin: 32px 32px;
						transform-origin: 32px 32px;
						&.grey {
							background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
						}
					}
					.l {
						display: flex;
						flex-direction: column;
						justify-content: center;
						position: relative;
						flex: 0 0 32%;
						text-align: center;
						border-radius: 0 8px 8px 0;
						.price {
							.prefix {
								font-size: 30rpx;
								display: inline;
							}
							.money {
								display: inline;
								font-weight: 700;
								font-size: 52rpx;
							}
						}
						.discount {
							font-size: 24rpx;
						}
					}
					.line {
						position: relative;
						flex: 0 0 0;
						border-left: 2px solid #fff;
						margin: 0 5px 0 3px;
						background: #fff;
						border-radius: 8px 8px 0 0;
						bottom: 0;
						&::before {
							border-radius: 0 0 8px 8px;
							top: 0;
							content: "";
							position: absolute;
							width: 12px;
							height: 6px;
							background: #f7f7f7;
							left: -7px;
							z-index: 1;
						}
						&::after {
							border-radius: 8px 8px 0 0;
							bottom: 0;
							content: "";
							position: absolute;
							width: 12px;
							height: 6px;
							background: #f7f7f7;
							left: -7px;
							z-index: 1;
						}
					}
					.content {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex: 1;
						padding: 15px 10px;
						border-radius: 8px 0 0 8px;
						.title {
							font-size: 32rpx;
						}
						.bottom {
							display: flex;
							align-items: center;
							justify-content: space-between;
							.time{
								font-size: 24rpx;
							}
							.receive {
								height: 23px;
								width: 61px;
								line-height: 23px;
								text-align: center;
								border-radius: 15px;
								color: #fff;
								font-size: 12px;
								border: 1px solid #fff;
							}
						}
					}
				}
			}
		}
	}
</style>